<template>
  <!-- 用户抗身份识别 -->
  <div class="page-x" style="width: 100%; height: 100%">
    <h3 style="color: #fff;" v-if="title">{{ tasktype + '--' + title }}</h3>
    <div id="container" ref="containerG6" class="g6-x" style="width: 100%; height: 100%;z-index: 100;" />
  </div>
</template>

<script>
// 【步骤2】 引入G6
import G6 from "@antv/g6";

export default {
  name: "Started",
  props: ['graphData', 'title', 'tasktype'],
  data() {
    return {
      dialogShow: false,
      dialogShow2: false,
      graph: null,
      isHas: 1,

    };
  },
  watch: {
    graphData: {
      handler(graphData) {
        if (graphData) {
          this.graph.clear();
          this.graph.data(graphData);
          this.graph.render();
        }
      },
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    initData(item) {
      //调用组件传递数据
      this.dialogShow = true
      this.$refs.dialog2Ref.initDataFn(item);
    },

    init() {
      let that = this;
      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      this.graph = new G6.Graph({
        container: "container",
        width,
        height,
        modes: {
          default: ["zoom-canvas", "drag-node", "activate-relations"],
        },
        defaultNode: {
          type: "image",
          image: require('@/assets/xd/user2.png'),
          size: 50,
          labelCfg: {
            style: {
              fill: "#fff",
            },
          },
        },
        defaultEdge: {
          type: "line",
          style: {
            stroke: "#F6BD16",
            lineWidth: 2,
          },
          labelCfg: {
            autoRotate: true,
            style: {
              fill: "#fff",
            },
          },
        },
        layout: {
          type: "force",
          preventOverlap: true,
          linkDistance: 200,
          nodeSpacing: 20,
        },
      });
      this.graph.data(this.graphData);
      this.graph.render();
    },
  },
};

</script>

<style scoped>
.g6-x {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  color: #0099ff;
  text-align: center;
  padding: 50px;
}

.zindexModel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
